<template>
    <div class="service-record">
        <c-wrap title="业务记录">
            <div class="mint-navbar">
                <div v-for="(item, index) in select.data" :key="index" @click="click(index)" class="mint-tab-item">
                    {{item.name}}
                </div>
            </div>
            <div class="break"></div>
            <mt-loadmore ref="loadmore" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
                         @bottom-status-change="loadMore">
                <div v-if="data.length>0" :style="{height:height+'px','overflow-y':'auto'}">
                    <mt-cell v-for="(item, index) in data" :key="index">
                        <icon slot="icon" clazz="icon-zhifu2" style="width: 28px;height: 28px;"></icon>
                        <div>
                            <p>{{item.typeTxt}}</p>
                            <p style="opacity: 0.5">{{item.createTime}}</p>
                        </div>
                        <p style="position: absolute;right: 0;top:25%">{{item.money}}元</p>
                    </mt-cell>
                </div>
                <div v-else :style="{height:height+'px','line-height':height+'px'}">暂无数据</div>
            </mt-loadmore>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'

    export default {
        components: {CWrap},
        data() {
            return {
                height: app.config.setting.height.display - app.config.setting.height.top - 10 - 54,
                select: {
                    type: '0',
                    data: [
                        {
                            id: '0',
                            name: '全部'
                        }, {
                            id: '1',
                            name: '缴费'
                        }, {
                            id: '2',
                            name: '扣费'
                        }
                    ]
                },
                data: [],
                pageSize: 0,
                total: 0,
                allLoaded: false
            }
        },
        methods: {
            loadData() {
                this.data = [];
                app.ajax.get(app.config.api.business.page, {
                    type: this.select.type,
                    pageSize: this.pageSize,
                    pageNum: 1
                }, (res) => {
                    this.total = res.total;
                    res.list.forEach((val) => {
                        this.data.push({
                            createTime: app.util.formatDate(val.createTime, 'yyyy-MM-dd hh:mm:ss'),
                            statusTxt: val.statusTxt,
                            typeTxt: val.typeTxt,
                            money: val.money,
                        })
                    })
                })
            },
            loadBottom() {
                setTimeout(() => {
                    document.getElementsByClassName('mint-loadmore-bottom')[0].setAttribute('style', 'display:none')
                }, 2000);
                if (this.pageSize <= this.total) {
                    this.pageSize += 10;
                    this.loadData();
                } else {
                    // this.allLoaded = true;// 若数据已全部获取完毕

                    this.$toast('数据已全部获取完毕！')
                }
            },
            loadMore(status) {
                this.$nextTick(() => {
                    document.getElementsByClassName('mint-loadmore-bottom')[0].setAttribute('style', 'display:block')
                })
            },
            click(index) {
                let arr = document.getElementsByClassName("mint-tab-item");
                for (let i = 0; i < 3; i++) {
                    arr[i].classList.remove("is-selected")
                }
                this.$nextTick(() => {
                    arr[index].classList.add("is-selected");
                    this.allLoaded = false;
                    this.select.type = index;
                    this.pageSize = 10;
                    this.loadData();
                });
            }
        },
        mounted() {
            this.click(0);
        }
    }
</script>
<style>
    .service-record .mint-cell-value {
        width: 90%;
    }
</style>
